<template>
	<section>
		<Row :gutter="10">
        <Card>
            <Row>
                <!--工具条-->
                <el-col :span="24" class="toolbar" id="serachId">
                    <el-form :inline="true" :model="filters">
                        <el-form-item style="float:right">
                            <el-button type="primary" v-on:click="getList">查询</el-button>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-input v-model="filters.serviceName" placeholder="服务名称"></el-input>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-input v-model="filters.serviceSerialNo" placeholder="服务标识"></el-input>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-date-picker type="date" placeholder="结束时间" v-model="filters.endTime" value-format="yyyy-MM-dd" style="width: 100%;" @change="onChange"></el-date-picker>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-date-picker type="date" placeholder="开始时间" v-model="filters.startTime" value-format="yyyy-MM-dd" style="width: 100%;" @change="onChange"></el-date-picker>
                        </el-form-item>
                    </el-form>
                </el-col>
            </Row>
        </Card>
        <Card>
            <el-row class="tac">
            <el-col :span="24" >
                <!--列表-->
                <el-table :data="tableData.list" highlight-current-row v-loading="listLoading" style="width: 100%;">
                    <el-table-column prop="serviceName" label="服务名称" min-width="200"></el-table-column>
                    <el-table-column prop="serviceSerialNo" label="服务标识" min-width="200"></el-table-column>
                    <el-table-column prop="totalNum" label="调用总数" min-width="120"></el-table-column>
                    <el-table-column prop="success" label="成功次数" min-width="120"></el-table-column>
                    <el-table-column prop="fail" label="失败次数" min-width="120"></el-table-column>
                    <el-table-column prop="failRate" label="成功率" min-width="120" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="successRate" label="失败率" min-width="120" :formatter="formatCommDatas"></el-table-column>
                </el-table>
            </el-col>
                <el-col :span="24" class="toolbar">
                    <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                   :current-page="tableData.pageNum"
                                   :page-size="tableData.pageSize" :total="tableData.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </Card>
		</Row>
	</section>
</template>

<script>

	import util from '../api/utils'
    import { invoLog_searchServiceQualityMonitoring } from '../api/api';

	export default {
		data() {
			return {
				filters: {
                    startTime: '',
                    endTime: '',
                    serviceName:''
				},
				tableData: {list:[],total:0, pageNum: 0,},
                listLoading: false,
			}
		},
		methods: {
			handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.getList();// 翻页后刷新页面数据
            },
            onChange() {
                let nowDate = Date.parse(new Date());
                if(this.filters.startTime != ''){
                    let startDate = Date.parse(this.filters.startTime);
                    if(startDate > nowDate){
                        this.filters.startTime = util.formatDate.format(new Date(), 'yyyy-MM-dd');
                    }
                    // // 30天之前的日期
                    // let dayStr = util.formatDate.format(new Date(30*24*60*60*1000), 'yyyy-MM-dd');
                    // // 选择的日期
                    // let startStr = util.formatDate.format(new Date(startDate), 'yyyy-MM-dd');
                    // if(startStr.replace('-','') > dayStr.replace('-','')){
                    //     //只能查30天内
                    //     this.filters.startTime = util.formatDate.format(new Date(nowDate - 30*24*60*60*1000), 'yyyy-MM-dd');
                    // }
                }
                if(this.filters.endTime != ''){
                    let endDate = Date.parse(this.filters.endTime);
                    if(endDate > nowDate){
                        this.filters.endTime = util.formatDate.format(new Date(), 'yyyy-MM-dd');
                    }
                }
            },
			getList() {
                var _this = this
				let params = {
                    startTime: _this.filters.startTime,
                    endTime: _this.filters.endTime,
                    serviceName:_this.filters.serviceName,
                    serviceSerialNo:_this.filters.serviceSerialNo,
                    pageNum:_this.currentPage,
                    pageSize:3,
				};
                _this.listLoading = true;
                invoLog_searchServiceQualityMonitoring(params).then(function(result){
                    _this.tableData = result.data.data;
                    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
                    console.log(this.tableData)
                    _this.listLoading = false;
				}.bind(_this)).catch(function (error) {
                    _this.listLoading = false;
					console.log(error);
				}.bind(_this));
            },
            formatCommDatas(row, column){
                return util.formatCommDatas(row,column);
            },
            formatDicTionary(value,type){
                return util.formatDicTionary(value,type);
            },
		},
		watch: {
			res1 (val) {
				this.showRes = val;
				console.log(this.showRes);
			},
			resDefault (val) {
				this.showRes = val;
			}
    	},
		mounted() {
			this.getList();
		}
	}

</script>